import type { PlusColumn, FieldValues } from "plus-pro-components";
import type { FormRules } from "element-plus";
import { ref } from "vue";
import { useTable } from "plus-pro-components";
import { findValuePath } from "@/utils/truncate";
import $request from "./request";

// 表单数据
export const formData = ref<FieldValues>();

export const { buttons } = useTable();
export const tableColumns: PlusColumn[] = [
  {
    label: "所属部门",
    prop: "depts",
    valueType: "cascader",
    options: () => $request.get.options({ type: "depts" }),
    hideInTable: true
  },
  {
    label: "账号",
    width: 200,
    prop: "username",
    tableColumnProps: {
      showOverflowTooltip: true
    }
  },
  {
    label: "昵称",
    width: 200,
    prop: "nickname",
    tableColumnProps: {
      showOverflowTooltip: true
    }
  },
  {
    label: "所属部门",
    minWidth: 200,
    prop: "depts",
    tableColumnProps: {
      showOverflowTooltip: true
    },
    render(value) {
      return value.map((item: any) => item.deptName).join("，");
    },
    hideInSearch: true
  },
  {
    label: "手机号",
    width: 150,
    prop: "phone",
    tableColumnProps: {
      showOverflowTooltip: true
    }
  },
  {
    label: "备注",
    width: 300,
    prop: "remark",
    valueType: "textarea",
    tableColumnProps: {
      showOverflowTooltip: true
    },
    hideInSearch: true
  },
  {
    label: "状态",
    width: 70,
    prop: "status",
    valueType: "select",
    options: [
      {
        label: "启用",
        value: true,
        color: "green"
      },
      {
        label: "停用",
        value: false,
        color: "red"
      }
    ],
    hideInTable: true
  },
  {
    label: "状态",
    width: 70,
    prop: "status",
    editable: true,
    hideInSearch: true
  }
];

// 按钮
buttons.value = [
  {
    text: "编辑",
    code: "update",
    props: { type: "primary", plain: true }
  },
  {
    text: "删除",
    code: "delete",
    props: { type: "danger", plain: true },
    confirm: {
      title: "系统提示",
      message: ({ row }) => {
        return `确定删除用户“${row.username}”吗？`;
      }
    }
  },
  {
    text: "重置密码",
    code: "password"
  },
  {
    text: "分配角色",
    code: "roles"
  }
];

// 表单数据转换
export const formDataTransform: FormDataTransform = {
  // 初始化表单数据
  async initForm(options) {
    const deptsData = await $request.get.options({
      type: "depts"
    });
    if (options?.id) {
      // 编辑
      const data = await $request.get.detail(options.id as number);
      const dept = [];
      for (const item of data.depts) {
        dept.push(findValuePath(deptsData, item.id));
      }
      return {
        ...data,
        dept
      };
    } else {
      // 添加
      return {
        dept: [],
        status: true,
        sort: 99
      };
    }
  },
  // 转化准备提交的表单数据
  transForm(options, formData) {
    const depts = [];
    for (const item of formData.dept) {
      depts.push(item[item.length - 1]);
    }
    return {
      ...formData,
      dept: undefined,
      depts
    };
  }
};

// 获取表单信息
export const getFormColumns = (options: FormModalOptions): PlusColumn[] => {
  return [
    {
      label: "所属部门",
      prop: "dept",
      valueType: "cascader",
      fieldProps: {
        placeholder: "顶级部门",
        props: {
          multiple: true,
          checkStrictly: true
        }
      },
      options: () =>
        $request.get.options({
          type: "depts"
        }),
      colProps: { span: 24 }
    },
    {
      label: "账号",
      prop: "username",
      valueType: "input",
      tooltip: "账号必须唯一"
    },
    {
      label: "密码",
      prop: "password",
      valueType: "input",
      fieldProps: {
        placeholder: "2-16位密码",
        type: "password"
      },
      hideInForm: !!options?.id
    },
    {
      label: "昵称",
      prop: "nickname",
      valueType: "input"
    },
    {
      label: "手机号",
      prop: "phone",
      valueType: "input"
    },
    {
      label: "邮箱",
      prop: "email",
      valueType: "input"
    },
    {
      label: "备注",
      prop: "remark",
      valueType: "textarea",
      colProps: { span: 24 }
    },
    {
      label: "状态",
      prop: "status",
      valueType: "radio",
      options: [
        {
          label: "显示",
          value: true
        },
        {
          label: "隐藏",
          value: false
        }
      ]
    },
    {
      label: "排序",
      prop: "sort",
      tooltip: "序号越小排名越靠前",
      valueType: "input-number"
    }
  ];
};

// 表单（Form）信息
export const formColumns: PlusColumn[] = [
  {
    label: "所属部门",
    prop: "dept",
    valueType: "cascader",
    fieldProps: {
      placeholder: "顶级部门",
      props: {
        multiple: true,
        checkStrictly: true
      }
    },
    options: () => $request.get.options({ type: "depts" }),
    colProps: { span: 24 }
  },
  {
    label: "账号",
    prop: "username",
    valueType: "input",
    tooltip: "账号必须唯一"
  },
  {
    label: "密码",
    prop: "password",
    valueType: "input",
    fieldProps: {
      placeholder: "2-16位密码",
      type: "password"
    }
  },
  {
    label: "昵称",
    prop: "nickname",
    valueType: "input"
  },
  {
    label: "手机号",
    prop: "phone",
    valueType: "input"
  },
  {
    label: "邮箱",
    prop: "email",
    valueType: "input"
  },
  {
    label: "备注",
    prop: "remark",
    valueType: "textarea",
    colProps: { span: 24 }
  },
  {
    label: "状态",
    prop: "status",
    valueType: "radio",
    options: [
      {
        label: "显示",
        value: true
      },
      {
        label: "隐藏",
        value: false
      }
    ]
  },
  {
    label: "排序",
    prop: "sort",
    tooltip: "序号越小排名越靠前",
    valueType: "input-number"
  }
];

// 验证
export const formRules: FormRules = {
  nickname: [
    {
      required: true,
      message: "请输入昵称",
      trigger: "blur"
    }
  ],
  username: [
    {
      required: true,
      message: "请输入账号名",
      trigger: "blur"
    }
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur"
    }
  ]
};
